<template>
  <div class="container">
    <el-row>
      <el-col :span="24">
        <div class="grid-content bg-purple-dark">
          <el-breadcrumb separator=">">
            <el-breadcrumb-item :to="{ path: '/' }">企业管理</el-breadcrumb-item>
            <el-breadcrumb-item>
              <a href="/">企业信息</a>
            </el-breadcrumb-item>
          </el-breadcrumb>
        </div>
      </el-col>
    </el-row>
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="113px"
      class="demo-ruleForm"
    >
      <el-row class="er">
        <el-col :span="4">
          <div class="grid-content bg-purple bg-pic" >
            <!-- <el-upload
              class="avatar-uploader"
              action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload> -->
            <img :src="this.userMassage.url" alt="">
          </div>
          <div class="tip">用户上传</div>
        </el-col>
        <el-col :span="10">
          <div class="grid-content bg-purple-light">
            <el-form-item label="公司名称:">{{userMassage.companyName}}</el-form-item>
            <el-form-item label="所属行业:" class="hangye">
              <el-select
                v-model="userMassage.industryCode"
                placeholder="请选择行业"
                @change="getCompanyIndustryCode"
              >
                <el-option
                  :value="item.dictCode"
                  :label="item.dictName"
                  v-for="item in industryDictList"
                ></el-option>
              </el-select>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="10">
          <div class="grid-content bg-purple">
            <el-form-item label="公司性质:">
              <el-select
                v-model="userMassage.typeCode"
                placeholder="请选择"
                @change="getCompanyNatureCode"
                style="width:260px"
              >
                <el-option
                  :value="item.dictCode"
                  :label="item.dictName"
                  v-for="item in typeDictList"
                ></el-option>
              </el-select>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <!-- //用户详细地址 -->
      <el-row class="address-box">
        <el-col :span="6">
          <div class="grid-content bg-purple-dark">
            <el-form-item label="公司所在地:">{{userMassage.addrProvince}}</el-form-item>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple-dark address-ruleForm">{{userMassage.addrCity}}</div>
        </el-col>
        <el-col :span="10">
          <div class="grid-content bg-purple-dark address-ruleForm1">{{userMassage.addressDetail}}</div>
        </el-col>
      </el-row>
      <!-- //用户上传 -->
      <el-row>
        <el-col :span="14">
          <div class="grid-content bg-purple">
            <el-form
              :model="ruleForm"
              :rules="rules"
              ref="ruleForm"
              label-width="100px"
              class="demo-ruleForm"
            >
              <el-form-item label="营业执照:">
                <el-upload
                  class="upload-demo"
                  ref="upload"
                  action="https://jsonplaceholder.typicode.com/posts/"
                  :auto-upload="false"
                >
                  <el-button slot="trigger" size="small" type="primary">上传</el-button>
                  <!-- <el-button style="margin-left: 10px;" size="small" type="success">上传到服务器</el-button> -->
                  <div slot="tip" class="el-upload__tip">注：图片格式为 JPG/JPEG/PNG/PDF 大小在2MB内</div>
                </el-upload>
              </el-form-item>
            </el-form>
          </div>
        </el-col>
        <el-col :span="10">
          <div class="grid-content bg-purple-light" label-width="123px">
            <el-form-item label="社会信用代码:">{{userMassage.cfuscc}}</el-form-item>
          </div>
        </el-col>
      </el-row>
      <!-- //法人姓名和信息 -->
      <el-row>
        <el-col :span="14">
          <div class="grid-content bg-purple">
            <el-form-item label="法人姓名:">{{userMassage.companyName}}</el-form-item>
          </div>
        </el-col>
        <el-col :span="10">
          <div class="grid-content bg-purple-light" label-width="123px">
            <el-form-item label="法人身份证号:">{{userMassage.legalEntityIdcard}}</el-form-item>
          </div>
        </el-col>
      </el-row>
      <!-- //对公银行和银行账号 -->
      <el-row>
        <el-col :span="14">
          <div class="grid-content bg-purple">
            <el-form-item label="对公银行账号：" label-width="123px">{{userMassage.bankAccount}}</el-form-item>
          </div>
        </el-col>
        <el-col :span="10">
          <div class="grid-content bg-purple-light">
            <el-form>
              <el-form-item label="对公银行开户行：" label-width="124px">{{userMassage.bankName}}</el-form-item>
            </el-form>
          </div>
        </el-col>
      </el-row>
    </el-form>

    <!-- //分割线 -->
    <el-divider></el-divider>
    <div class="tips">合同信息</div>
    <!-- //搜索合同信息 -->
    <el-autocomplete class="sou" v-model="contractSearchStr" placeholder="请输入合同名称"></el-autocomplete>
    <el-button type="primary" @click="handleSelectContract" icon="el-icon-search" size="small"></el-button>

    <!-- //合同信息列表 -->
    <div class="tab">
      <el-table
        ref="multipleTable"
        border
        stripe
        :data="contractTableList"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleChangeContract"
      >
        <el-table-column type="selection" width="55" fixed></el-table-column>
        <el-table-column label="合同名称" width="120" fixed>
          <template slot-scope="scope">{{ scope.row.contractSubjectName }}</template>
        </el-table-column>
        <el-table-column prop="name" label="签署时间" width="120">
          <template slot-scope="scope"> {{$moment((scope.row.contractStartdate)).format('YYYY-MM-DD')}}</template>
        </el-table-column>
        <el-table-column prop="address" label="合同开始时间" show-overflow-tooltip width="210">
          <template slot-scope="scope">{{$moment((scope.row.contractStartdate)).format('YYYY-MM-DD')}}</template>
        </el-table-column>
        <el-table-column prop="address" label="合同结束时间" show-overflow-tooltip width="210">
          <template slot-scope="scope">{{$moment((scope.row.contractEnddate)).format('YYYY-MM-DD')}}</template>
        </el-table-column>
        <el-table-column prop="address" label="业务类别" show-overflow-tooltip width="210">
          <template slot-scope="scope">{{ scope.row.customerType}}</template>
        </el-table-column>
        <el-table-column prop="address" label="描述" show-overflow-tooltip width="210">
          <template slot-scope="scope">{{ scope.row.comment}}</template>
        </el-table-column>

        <el-table-column prop="address" label="合同电子版" show-overflow-tooltip width="210"></el-table-column>
      </el-table>
    </div>
    <!-- 分页功能  合同信息-->
    <div class="block">
      <el-pagination
        @size-change="handleSizeChangeContract"
        @current-change="handlePageChangeContract"
        :page-sizes="pageizes"
        :page-size="contractPageInfo.size"
        :current-page="contractPageInfo.page"
        :total="contractPageInfo.total"
        layout="total, sizes, prev, pager, next, jumper"
      ></el-pagination>
    </div>
    <!-- //分割线 -->
    <el-divider></el-divider>
    <div class="tips">发票信息</div>
    <!-- //搜索合同信息 -->
    <el-autocomplete class="sou" v-model="receiptSearchStr" placeholder="请输入发票名称"></el-autocomplete>
    <el-button @click="handleSelectReceipt" type="primary" icon="el-icon-search" size="small"></el-button>
    <el-button type="primary" @click="receiptShowAddOrEdit = true" size="small">新增</el-button>
    <!-- 发票信息列表 -->
    <div class="tab1">
      <el-table
        ref="multipleTable"
        :data="receiptTableList"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleChangeReceipt"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column label="单位名称" width="120" fixed>
          <template slot-scope="scope">{{ scope.row.receiptInvoiceTitle}}</template>
        </el-table-column>
        <el-table-column prop="name" label="纳税人识别码" width="120">
          <template slot-scope="scope">{{ scope.row.receiptInvoiceTitle}}</template>
        </el-table-column>
        <el-table-column prop="address" label="注册电话" show-overflow-tooltip width="210">
          <template slot-scope="scope">{{ scope.row.receiptInvoiceTel}}</template>
        </el-table-column>
        <el-table-column prop="address" label="注册地址" show-overflow-tooltip width="210">
          <template slot-scope="scope">{{ scope.row.receiptRegeditAddr}}</template>
        </el-table-column>
        <el-table-column prop="address" label="开户银行" show-overflow-tooltip width="210">
          <template slot-scope="scope">{{ scope.row.receiptInvoiceBank}}</template>
        </el-table-column>
        <el-table-column prop="address" label="银行账号" show-overflow-tooltip width="210">
          <template slot-scope="scope">{{ scope.row.receiptInvoiceAccount}}</template>
        </el-table-column>
        <el-table-column prop="address" label="描述" show-overflow-tooltip width="210">
          <template slot-scope="scope">{{ scope.row.contentRemarks}}</template>
        </el-table-column>
        <el-table-column prop="address" label="操作" show-overflow-tooltip width="210">
          <template slot-scope="scope">
            <!-- 编辑和删除 -->
            <el-button
              @click="editCompanyReceipt(scope.row)"
              type="primary"
              icon="el-icon-edit"
              size="small"
            >编辑</el-button>
            <!-- 点击编辑发票信息 -->
            <el-button
              @click="delCompanyReceipt(scope.row)"
              type="danger"
              icon="el-icon-delete"
              size="small"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页功能 -->
    <div class="block">
      <el-pagination
        @size-change="handleSizeChangeReceipt"
        @current-change="handlePageChangeReceipt"
        :current-page="receiptPageInfo.page"
        :page-sizes="pageizes"
        :page-size="receiptPageInfo.size"
        :total="receiptPageInfo.total"
        layout="total, sizes, prev, pager, next, jumper"
      ></el-pagination>
    </div>

    <!-- 添加/编辑发票信息的diag -->
    <el-dialog title="添加/编辑发票信息" :visible.sync="receiptShowAddOrEdit" width="35%" :before-close="cancelAddCompanyReceipt">
      <el-form
        :model="receiptFrom"
        :rules="receiptFromRules"
        ref="receiptFrom"
        label-width="120px"
        class="demo-ruleForm"
      >
        <el-form-item label="单位名称" prop="receiptInvoiceTitle">
          <el-input v-model="receiptFrom.receiptInvoiceTitle" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="注册电话" prop="receiptInvoiceTel">
          <el-input v-model="receiptFrom.receiptInvoiceTel" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="纳税人识别码" prop="receiptInvoicePayno">
          <el-input v-model="receiptFrom.receiptInvoicePayno" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="银行账户" prop="receiptInvoiceAccount">
          <el-input v-model="receiptFrom.receiptInvoiceAccount" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="开户银行" prop="receiptInvoiceBank">
          <el-select v-model="receiptFrom.receiptInvoiceBank" placeholder="请选择" class="input-fr1">
            <el-option :value="item.dictName" :label="item.dictName" v-for="item in bankDictList"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="注册地址" prop="receiptRegeditAddr">
          <el-input v-model="receiptFrom.receiptRegeditAddr" placeholder="请输入"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelAddCompanyReceipt">取 消</el-button>
        <el-button type="primary" @click="addCompanyReceipt">确 定</el-button>
      </div>
    </el-dialog>
    <!-- //提交和取消 -->
    <el-row :gutter="20" style="margin-top:20px">
      <el-col :span="12" :offset="8">
        <div class="grid-content bg-purple">
          <el-button type="primary" >提交</el-button>
          <el-button type="primary">取消</el-button>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import moment from 'moment'

export default {
  components: { moment },
  data() {
    return {
      imageUrl: '',
      //用户信息
      userMassage: {
        companyName: '', //公司名
        typeName: '', //公司性质
        typeCode: '', //公司性质
        industryName: '', //公司行业
        industryCode: '', //公司行业
        addrProvince: '', //公司所在省
        addrCity: '', //公司所在市
        addressDetail: '', //公司所在地址
        cfuscc: '', //社会信用代码
        legalEntityName: '', //法人姓名
        legalEntityIdcard: '', //法人身份证
        bankName: '', //对公银行名称
        bankCode: '', //对公银行名称Code
        bankAccount: '', //对公银行账号
        tentAttachmentId: '', //用户上传的logo ID
        attachmentBpId: '', //营业执照附件id
        tentId: '', //租户id
        id: '', //公司id
        url:''
      },
      industryDictList: [], //所属行业
      typeDictList: [], //公司属性
      bankDictList: [],
      timeout: null,

      //新增发票信息的diag
      ruleForm: {
        typeName: '', //公司性质
        typeCode: '', //公司性质
        industryName: '', //公司行业
        industryCode: '', //公司行业
        tentAttachmentId: '', //用户上传的logo ID
        attachmentBpId: '', //营业执照附件id
        tentId: '', //租户id
        id: '' //公司id
      },
      rules: {
        name: [{ required: true, message: '请输入单位名称', trigger: 'blur' }],
        number: [
          { required: true, message: '请输入纳税人识别码', trigger: 'blur' }
        ]
      },

      //分页的公共数据
      pageizes: [10, 20, 50, 100],

      /*-----------------------处理合同----------------------*/
      contractTableList: [],
      //分页数据
      contractPageInfo: {
        page: 1,
        filter: [],
        query: [],
        size: 10,
        sidx: '',
        sort: '',
        total: 0
      },
      contractSearchStr: '', //合同搜索框

      /*-----------------------处理发票----------------------*/
      receiptTableList: [],
      //分页数据
      receiptPageInfo: {
        page: 1,
        filter: [],
        query: [],
        size: 10,
        sidx: '',
        sort: '',
        total: 0
      },
      receiptSearchStr: '', //发票搜索框
      receiptShowAddOrEdit: false,

      //新增发票信息的diag
      receiptFrom: {
        receiptInvoiceTitle: '', //发票抬头
        receiptInvoiceTel: '', //注册电话
        receiptInvoicePayno: '', //纳税人识别码
        receiptInvoiceAccount: '', //银行账户
        receiptInvoiceBank: '', //开户银行
        receiptRegeditAddr: '',
        contentRemarks: '',
        tentId: '',
        basicInfoId: '',
        id: ''
      },
      receiptFromRules: {
        receiptInvoiceTitle: [
          { required: true, message: '请输入单位名称', trigger: 'blur' }
        ],
        receiptInvoiceTel: [
          { required: true, message: '请输入注册电话', trigger: 'blur' }
        ],
        receiptInvoicePayno: [
          { required: true, message: '请输入纳税人识别码', trigger: 'blur' }
        ],
        receiptInvoiceAccount: [
          { required: true, message: '请输入银行账户', trigger: 'blur' }
        ],
        receiptInvoiceBank: [
          { required: true, message: '请输入开户银行', trigger: 'blur' }
        ],
        receiptRegeditAddr: [
          { required: true, message: '请输入注册地址', trigger: 'blur' }
        ]
      },
      formLabelWidth: '120px'
    }
  },
  methods: {
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
    },
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isLt2M
    },

    /*-----------------------处理合同的分页----------------------*/
    //搜索框的值变化
    handleSelectContract(item) {
      console.log(item)
      this.getUserCompanyContract()
    },
    // 页大小发生变化
    handleSizeChangeContract(newSize) {
      console.log(`每页 ${newSize} 条`)
      this.contractPageInfo.size = newSize
      this.getUserCompanyContract()
    },
    handlePageChangeContract(newPage) {
      console.log(`当前页: ${newPage}`)
      this.contractPageInfo.page = newPage
      this.getUserCompanyContract()
    },
    handleChangeContract() {
      this.getUserCompanyContract()
    },
    //获取当前用户的合同信息
    async getUserCompanyContract() {
      this.contractPageInfo.query = []
      this.contractPageInfo.query.push({
        property: 'contractSubjectName_like',
        value: this.contractSearchStr
      })
      var { data: res } = await this.$http.post(
        'company/information/current/contract',
        this.contractPageInfo
      )
      this.contractTableList = res.rows
      this.contractPageInfo.total = res.records
    },

    /*-----------------------处理发票的分页----------------------*/
    //搜索框的值变化
    handleSelectReceipt(item) {
      console.log(item)
      this.getUserCompanyReceipt()
    },
    // 页大小发生变化
    handleSizeChangeReceipt(newSize) {
      console.log(`每页 ${newSize} 条`)
      this.receiptPageInfo.size = newSize
      this.getUserCompanyReceipt()
    },
    handlePageChangeReceipt(newPage) {
      console.log(`当前页: ${newPage}`)
      this.receiptPageInfo.page = newPage
      this.getUserCompanyReceipt()
    },
    handleChangeReceipt() {
      this.getUserCompanyReceipt()
    },
    //获取当前用户的发票信息(分页)
    async getUserCompanyReceipt() {
      this.receiptPageInfo.query.push({
        property: 'receiptInvoiceTitle_like',
        value: this.receiptSearchStr
      })
      const { data: res } = await this.$http.post(
        `company/information/current/receipt`,
        this.receiptPageInfo
      )
      this.receiptTableList = res.rows
      this.receiptPageInfo.total = res.records
    },
    async addCompanyReceipt() {
      var ok = false
      this.$refs.receiptFrom.validate(valid => {
        if (valid) {
          ok = valid
        }
      })
      if (!ok) {
        this.receiptShowAddOrEdit = true
        return
      }
      this.receiptFrom.tentId = this.userMassage.tentId
      this.receiptFrom.basicInfoId = this.userMassage.id
      const { data: res } = await this.$http.post(
        `company/information/addReceipt`,
        this.receiptFrom
      )
      if (res.code != 0) {
        return this.$message.error('新增异常')
      }
      this.handleChangeReceipt()
      this.cancelAddCompanyReceipt()
    },
    cancelAddCompanyReceipt (done){
      this.receiptFrom = {
        receiptInvoiceTitle: '', //发票抬头
          receiptInvoiceTel: '', //注册电话
          receiptInvoicePayno: '', //纳税人识别码
          receiptInvoiceAccount: '', //银行账户
          receiptInvoiceBank: '', //开户银行
          receiptRegeditAddr: '',
          contentRemarks: '',
          tentId: '',
          basicInfoId: '',
          id: ''
      }
      this.$refs.receiptFrom.resetFields()
      if(typeof done === 'function'){
        done()
      }else{
        this.receiptShowAddOrEdit = false
      }
    },
    async delCompanyReceipt(row) {
      const { data: res } = await this.$http.post(
        `company/information/delReceipt/` + row.id
      )
      this.handleChangeReceipt()
    },
    async editCompanyReceipt(row) {
      this.receiptFrom.receiptInvoiceTitle = row.receiptInvoiceTitle //发票抬头
      this.receiptFrom.receiptInvoiceTel = row.receiptInvoiceTel //注册电话
      this.receiptFrom.receiptInvoicePayno = row.receiptInvoicePayno //纳税人识别码
      this.receiptFrom.receiptInvoiceAccount = row.receiptInvoiceAccount //银行账户
      this.receiptFrom.receiptInvoiceBank = row.receiptInvoiceBank //开户银行
      this.receiptFrom.receiptRegeditAddr = row.receiptRegeditAddr
      this.receiptFrom.id = row.id
      this.receiptShowAddOrEdit = true
    },

    //获取当前用户的企业信息
    async getInforCurrentMsg() {
      const { data: res } = await this.$http.get('company/information/current')
      console.log(res)
      this.userMassage.id = res.data.id
      this.userMassage.tentId = res.data.tentId
      this.userMassage.companyName = res.data.companyName
      this.userMassage.industryName = res.data.industryName
      this.userMassage.addrProvince = res.data.addrProvince
      this.userMassage.addrCity = res.data.addrCity
      this.userMassage.addressDetail = res.data.addressDetail
      this.userMassage.cfuscc = res.data.cfuscc
      this.userMassage.legalEntityName = res.data.legalEntityName
      this.userMassage.legalEntityIdcard = res.data.legalEntityIdcard
      this.userMassage.bankName = res.data.bankName
      this.userMassage.bankAccount = res.data.bankAccount
      this.userMassage.url=window.localStorage.getItem('url')
      console.log(this.userMassage)

    },

    //获取字典中公司的所属性质
    async getCompanyNature() {
      const { data: res } = await this.$http.get('sys/list/dicts/30023')
      this.typeDictList = res.data.dictionaries
    },
    //获取字典中公司的所属行业
    async getCompanyIndustry() {
      const { data: res } = await this.$http.get('sys/list/dicts/10090')
      this.industryDictList = res.data.dictionaries
    },
    //获取字典中对公银行开户行
    async getBankName() {
      const { data: res } = await this.$http.get('sys/list/dicts/10024')
      this.bankDictList = res.data.dictionaries
    },
    getCompanyNatureCode() {
      for (let i = 0; i < this.typeDictList.length; i++) {
        if (this.typeDictList[i].dictCode === this.ruleForm.typeCode) {
          this.ruleForm.typeName = this.typeDictList[i].dictName
        }
      }
    },
    getCompanyIndustryCode() {
      for (let i = 0; i < this.industryDictList.length; i++) {
        if (this.industryDictList[i].dictCode === this.ruleForm.industryCode) {
          this.ruleForm.industryName = this.industryDictList[i].dictName
        }
      }
    },
    getBankNameCode() {
      for (let i = 0; i < this.bankDictList.length; i++) {
        if (this.bankDictList[i].dictCode === this.ruleForm.bankCode) {
          this.ruleForm.bankName = this.bankDictList[i].dictName
        }
      }
    }
  },
  created() {
    this.getInforCurrentMsg()
    this.getUserCompanyContract()
    this.getUserCompanyReceipt()
    this.getCompanyNature()
    this.getCompanyIndustry()
    this.getBankName()
  }
  //搜索部分=e
}
</script>
<style lang="less" scoped>
.el-col-10 {
  width: 41.66667%;
}
.el-upload__tip {
  color: red;
}
.home-container .container {
  padding: 50px;
}
.el-upload {
  border: 1px dashed #d9d9d9;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 0px;
  color: #8c939d;
  // width: 195px;
  // height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.tip {
  //   margin-left: 50px;
  margin: auto;
  width: 70px;
  font-size: 16px;
  color: #42a2ff;
}

.hangye {
  margin-top: 60px;
}

.int-mc {
  width: 65%;
}

.er {
  margin-top: 45px;
}

.bg-pic {
  background-color: #eff3f8;
  // background-image: url(../../assets/Verification/u3374.png);
  background-repeat: no-repeat;
  background-position: center;
  width: 178px;
  height: 178px;
  img{
    width: 100%;
    height: 100%;
  }
}

.address-ruleForm,
.address-ruleForm1 {
  margin-left: 15px;
  margin-top: 14px;
}

.address-box {
  margin-top: 25px;
}

.input-fr {
  width: 60%;
}

.input-fr1 {
  width: 50%;
}

.tips {
  //   width: 79px;
  height: 21px;
  font-size: 21px;
  font-family: Adobe Heiti Std;
  font-weight: normal;
  color: rgba(35, 165, 249, 1);
  line-height: 26px;
}

.sou {
  margin-top: 15px;
}

.block {
  margin: auto;
  width: 1000px;
}
</style>
